import React, { JSX } from "react";
import { Navigate, Route, Routes, useNavigate } from "react-router-dom";
import { useAppDispatch, useAppSelector } from "../actions/hooks";
import { selectRouterActivated, selectRouterNavigation } from "../actions/Router";
import Login from "../pages/Login";
import MainFramework from "../pages/MainFramework";
import AlertBox from "../components/AlertBox";
import { globalAlertActions, selectGlobalAlertActivated, selectGlobalAlertMessage, selectGlobalAlertSeverity, selectGlobalAlertTitle } from "../actions/GlobalAlert";

function NulRoutes(): JSX.Element {

  const navigate = useNavigate();
  const dispatch = useAppDispatch();

  const navigation = useAppSelector(selectRouterNavigation);
  const navigationActivated = useAppSelector(selectRouterActivated);

  const globalAlertActivated = useAppSelector(selectGlobalAlertActivated);
  const globalAlertTitle = useAppSelector(selectGlobalAlertTitle);
  const globalAlertMessage = useAppSelector(selectGlobalAlertMessage);
  const globalAlertSeverity = useAppSelector(selectGlobalAlertSeverity);

  React.useEffect(() => {
    if (navigationActivated) {
      navigate(navigation.url, { state: navigation.state });
    }
  }, [navigationActivated, navigation, navigate]);

  return (
    <>
      <Routes>
        <Route path='*' element={<Navigate replace to='/login' />} />
        <Route path='/login' element={<Login />} />
        <Route path='/main/:id' element={<MainFramework />} />
      </Routes>
      <AlertBox
        open={globalAlertActivated}
        autoHideDuration={4000}
        onClose={() => { dispatch(globalAlertActions.clear()); }}
        severity={globalAlertSeverity}
        message={globalAlertMessage}
        title={globalAlertTitle}
      />
    </>
  );
}

export default NulRoutes;